<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>体验websocket</title>
    <style>
      #contanier {
        width: 500px;
        height: 400px;
        border: 2px dashed #7575e7;
        overflow-y: auto;
      }
    </style>
  </head>

  <body>
    <div id="contanier"></div>
    <!-- 1  建立连接 (拨号) -->
    <!-- 2  发消息 接消息 -->
    <!-- 3  关闭连接 -->
    <input type="text" id="message" />
    <button id="btn1">建立连接</button>
    <button id="btn2">发送消息</button>
    <button id="btn3">关闭连接</button>
    <p></p>

    <script>
      var dom = document.getElementById('contanier')
      var inputDom = document.getElementById('message')
      var btn1 = document.getElementById('btn1')
      var btn2 = document.getElementById('btn2')
      var btn3 = document.getElementById('btn3')
      let ws
      btn1.onclick = function () {
        // WebSocket是浏览器内置的构造函数
        ws = new WebSocket('ws://121.40.165.18:8800')
        console.log(ws)
        // 成功open事件
        ws.onopen = function () {
          dom.innerHTML += `<p>与服务器连接成功</p>`
        }
        // 失败error
        ws.onerror = function () {
          console.log('连接失败')
        }
        // message事件(服务器给客户端响应)
        ws.onmessage = function (e) {
          console.log(e.data)
          dom.innerHTML += `<p>服务器说：${e.data}</p>`
        }
        // close事件(客户端与服务器断开连接)
        ws.onclose = function () {
          dom.innerHTML += `<p>与服务器断开连接</p>`
        }
      }

      btn2.onclick = function () {
        const content = inputDom.value.trim()
        if (content.length === 0) return
        // 有内容发送给服务器(WebSocket实例对象的send方法)
        ws.send(content)
        dom.innerHTML += `<p>我说：${content}</p>`
      }

      btn3.onclick = function () {
        // 关闭连接
        ws.close()
      }
      // WebSocket浏览器支持
      // 1.连接浏览器 let ws=new WebSocket(服务器地址)
      // 2.连接成功会触发open事件 ws.onopen=function(){}
      // 3.服务器给客户端发送消息会触发message事件ws.onmessage=function(){}
      // 4.客户端与服务器断开了连接会触发close事件ws.onclose=function(){}

      // 方法
      // 客户端发送消息给服务器 ws.send(消息)
      // 客户端主动和服务器断开连接 ws.close()
    </script>
  </body>
</html>
